<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8"/>
<title>OnClick demo</title>

<!-- 必要文件：jquery -->
<script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- 必要文件：echarts -->
<script src="/echarts/echarts.min.js"></script>
<!-- ECharts主题(可选，默认为macarons) -->
<script src="/echarts/theme/dark.js"></script>
<script src="/echarts/theme/infographic.js"></script>
<script src="/echarts/theme/macarons.js"></script>
<script src="/echarts/theme/roma.js"></script>
<script src="/echarts/theme/shine.js"></script>
<script src="/echarts/theme/vintage.js"></script>
<!-- 必要文件：echarts.ajax自定义封装 -->
<script src="/echarts/echarts.ajax.js"></script>
<!-- 必要文件：ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 460px;
    width: 99%;
    overflow: hidden;
    padding : 10px;
    margin: 10px auto;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>

<!-- 弹出dialog(可选) -->
<link href="/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<script src="/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>

</head>
<body>
1)图表点击事件：<br/>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo-bar-jbox"
	class="echarts"
	echarts-type="bar"
	echarts-title="未来一周气温变化" 
	echarts-theme="macarons"
	echarts-x-axis-name="日期(星期)"
	echarts-y-axis-name="温度(°C)" 
	echarts-url="/echarts/getWeatherData"
	echarts-onclick-id="demo-bar-jbox-onclick"
></div>
<a id="demo-bar-jbox-onclick" 
	href="/echarts/onclick" 
	target="_jbox"
	jbox-width="1200"
	jobx-height="400"
	jbox-title="跳转dialog对话框-{seriesName}-{name}"></a><br/>
	
a标签自定义类型_jbox、_echarts,其他是a标签内置的:<br/>
<input type="radio" name="clickType" value="_jbox" checked/>_jbox<br/>
<input type="radio" name="clickType" value="_blank"/>_blank<br/>
<input type="radio" name="clickType" value="_self"/>_self<br/>
<input type="radio" name="clickType" value="_parent"/>_parent<br/>
<input type="radio" name="clickType" value="_top"/>_top<br/>

2)图表点击刷新其他图表（new）：<br/>
<input type="radio" name="clickType" value="_echarts" checked/>_echarts（new）<br/>

<form>
	id:<input name="id"/><br/>
	seriesIndex:<input name="seriesIndex"/><br/>
	seriesName:<input name="seriesName"/><br/>
	name:<input name="name"/><br/>
	provinceCode:<input name="provinceCode"/><br/>
	value:<input name="value"/><br/>
	x:<input name="x"/><br/>
	y:<input name="y"/><br/>
</form>

<div id="demo-bar-echarts"
	class="echarts"
	echarts-type="bar"
	echarts-title="未来一周气温变化" 
	echarts-theme="macarons"
	echarts-x-axis-name="日期(星期)"
	echarts-y-axis-name="温度(°C)" 
	echarts-url="/echarts/getWeatherData"
	echarts-onclick-id="demo-bar-echarts-onclick"
></div>

<a id="demo-bar-echarts-onclick" 
	echarts-ids="demo-pie" 
	target="_echarts"></a><br/>
	
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo-pie"
	class="echarts"
	echarts-type="pie"
	echarts-title="搜索引擎现状" 
	echarts-theme="macarons"
	echarts-url="/echarts/pie"
	echarts-onclick-id="demo-pie-onclick"
></div> 

<script type="text/javascript">
$(document).ready(function() {
	$("input[name='clickType']").change(echartsOnclick)
	function echartsOnclick() {
		var clickType = $(this).val() + '';
		$("#demo-bar-jbox-onclick").attr("target",clickType);
	}
});
</script>

</body>
</html>